<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        html,body,#app{
            padding: 0px;
            margin: 0px;
            height: 100%;
            background-color: #aaaaaa;
        }
        #pages{
            padding-top: -100px;
            text-align: right;
        }
        #pages>span{
            background-color: #ddd;
            margin: 2px;
            padding: 2px 5px;
            border-radius: 2px;
            min-width: 15px;
            display: inline-block;
            text-align: center;
            cursor: pointer;
        }
        #pages>span.current{
            background-color: #aaa;
        }
        #pages>span:hover{
            background-color: beige;
            color: green;
        }
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 80px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 20px;
            padding-left: 30px;
            margin-bottom: 0;
            width: 50%;
        }
        .ul ul{
            list-style: none;
            margin-left: 50px;
        }
        .ul li {
            margin-left: 50px;
            display: inline;
        }
    </style>
</head>
<body>
<div id="app" style="height: 100%;width: 100%">
    <el-container style="width: 100%;height: 100%">
        <el-header style="padding-top: 10px">
            <el-form :inline="true" class="demo-form-inline" style="display: flex;align-items: center">
                <el-form-item label="队伍名称">
                    <el-input placeholder="队伍名称" v-model="name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.prevent="selectTeamByName()">查询</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main style="height: 100%;padding: 0 0 0 0">
            <el-table
                    :data="teams"
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}"
                    style="width: 100%;height: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-button @click.prevent="selectPlayers(props.row.teamId)">查看队内选手</el-button>
                        <div class="ul">
                            <ul>
                                <li v-for="player in players" v-if="player.teamId==props.row.teamId">
                                    <img width="50px" :src="player.photoUrl">
                                    <span>{{player.name}} {{player.replace}}</span>
                                </li>
                            </ul>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="teamId"
                        label="编号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="队伍名称">
                </el-table-column>
                <el-table-column
                        prop="icon"
                        label="队伍图标" width="100px">
                    <template v-slot:default="scope">
                        <el-image :src="scope.row.icon"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="totalWin"
                        label="获胜对局总数">
                </el-table-column>
                <el-table-column
                        prop="totalLose"
                        label="失败对局总数">
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <div id="pages">
                <el-pagination background
                               :page-size="3" layout="prev,pager,next"
                               :total="total"
                               @current-change="selectAllTeams"/>
            </div>
        </el-footer>
    </el-container>
</div>
<script>
    var v=new Vue({
        el:"#app",
        data:{
            team: {

            },
            teams:{},
            players:[],
            name:"",
            page:1,
            total:0
        },
        created(){
            this.selectTotal();
            this.selectAllTeams(1);
        },
        methods: {
            selectTotal(){
                axios.get("/yjh-admin/yjh/admin/selectTeamsCount").then(res=>{
                    this.total=res.data;
                })
            },
            selectAllTeams(page){
                axios.get("/yjh-admin/yjh/admin/selectAllTeams?current="+page).then(res=>{
                    this.teams=res.data.list;
                })
            },
            selectPlayers(teamId){
                axios.post("/yjh-admin/yjh/admin/players?team_id="+teamId).then(res=>{
                    this.players=res.data;
                })
            },
            selectTeamByName(){
                axios.post("/yjh-admin/yjh/admin/selectTeamByName?name="+this.name).then(res=>{
                    if (res.data.code){
                        this.$message(res.data.msg);
                        this.teams=res.data.data;
                        this.total=this.teams.length;
                    }
                });
            }
        }
    });
</script>
</body>
</html>
<style>
    .el-container{
        height: 300px;
        width: 400px;
    }
    .el-header{
        background-color: #eee;
    }
    .el-footer{
        background-color: #ddd;
    }
    .el-aside{
        background-color: #cccccc;
    }
    .el-main{
        background-color: #555555;
    }


</style>